import React, { Component } from "react";
import { Tabs, Card, Statistic, Table } from "antd";
import LinkButton from "../../../components/link-button/index";

const { TabPane } = Tabs;
const columns = [
  {
    title: "实验数据集名称",
    dataIndex: "name",
    key: "name",
  },
  {
    title: "来源数据",
    dataIndex: "source",
    key: "source",
  },
  {
    title: "记录数",
    dataIndex: "record",
    key: "record",
  },
  {
    title: "字段数",
    dataIndex: "field",
    key: "field",
  },
  {
    title: "模型数",
    dataIndex: "model",
    key: "model",
  },
  {
    title: "修改日期",
    dataIndex: "changed",
    key: "changed",
  },
  {
    title: "状态",
    dataIndex: "status",
    key: "status",
  },

  {
    title: "操作",
    key: "action",
    render: () => (
      <div>
        <LinkButton>数据处理</LinkButton>
        &nbsp; &nbsp;
        <LinkButton>更多</LinkButton>
      </div>
    ),
  },
];

const data = [
  {
    key: "1",
    name: "转基因",
    source: "项目1",
    record: "12042条",
    field: "12",
    model: "1",
    changed: "2020-07-06",
    status: "关联成功",
  },
];
function callback(key) {
  console.log(key);
}
class projectdetail extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    return (
      <Tabs defaultActiveKey="1" onChange={callback}>
        <TabPane tab="项目概括" key="1">
          <div style={{ margin: "5px 20px" }}>项目基本详情</div>
          <div
            style={{
              padding: "30px",
              display: "flex",
              justifyContent: "space-between",
            }}
          >
            <Card style={{ width: 300, height: 200 }}>
              <Statistic
                style={{ fontSize: 20, fontWeight: 900 }}
                title="合作伙伴"
                value={1}
                valueStyle={{
                  color: "#3f8600",
                  textAlign: "center",
                  fontSize: 50,
                  fontWeight: 500,
                }}
              />
            </Card>
            <Card style={{ width: 300, height: 200 }}>
              <Statistic
                style={{ fontSize: 20, fontWeight: 900 }}
                title="融合数据集"
                value={2}
                valueStyle={{
                  color: "#3f8600",
                  textAlign: "center",
                  fontWeight: 500,
                  fontSize: 50,
                }}
              />
            </Card>
            <Card style={{ width: 300, height: 200 }}>
              <Statistic
                style={{ fontSize: 20, fontWeight: 900 }}
                title="学习任务"
                value={3}
                valueStyle={{
                  color: "#3f8600",
                  textAlign: "center",
                  fontWeight: 500,
                  fontSize: 50,
                }}
              />
            </Card>
            <Card style={{ width: 300, height: 200 }}>
              <Statistic
                style={{ fontSize: 20, fontWeight: 900 }}
                title="学习模型"
                value={4}
                valueStyle={{
                  color: "#3f8600",
                  textAlign: "center",
                  fontWeight: 500,
                  fontSize: 50,
                }}
              />
            </Card>
          </div>
        </TabPane>
        <TabPane tab="样本集" key="2">
          <div style={{ margin: "5px 20px" }}>样本集</div>
          <div
            style={{
              padding: "30px",
              display: "flex",
              justifyContent: "space-between",
            }}
          >
            <Card style={{ width: 300, height: 200 }}>
              <Statistic
                style={{ fontSize: 20, fontWeight: 900 }}
                title="合作伙伴"
                value={1}
                valueStyle={{
                  color: "#3f8600",
                  textAlign: "center",
                  fontSize: 50,
                  fontWeight: 500,
                }}
              />
            </Card>
            <Card style={{ width: 300, height: 200 }}>
              <Statistic
                style={{ fontSize: 20, fontWeight: 900 }}
                title="融合数据集"
                value={2}
                valueStyle={{
                  color: "#3f8600",
                  textAlign: "center",
                  fontWeight: 500,
                  fontSize: 50,
                }}
              />
            </Card>
            <Card style={{ width: 300, height: 200 }}>
              <Statistic
                style={{ fontSize: 20, fontWeight: 900 }}
                title="学习任务"
                value={3}
                valueStyle={{
                  color: "#3f8600",
                  textAlign: "center",
                  fontWeight: 500,
                  fontSize: 50,
                }}
              />
            </Card>
            <Card style={{ width: 300, height: 200 }}>
              <Statistic
                style={{ fontSize: 20, fontWeight: 900 }}
                title="学习模型"
                value={4}
                valueStyle={{
                  color: "#3f8600",
                  textAlign: "center",
                  fontWeight: 500,
                  fontSize: 50,
                }}
              />
            </Card>
          </div>
        </TabPane>
        <TabPane tab="虚拟融合数据集" key="3">
          <Table columns={columns} dataSource={data} />
        </TabPane>
        <TabPane tab="学习任务" key="4">
          学习任务
        </TabPane>
        <TabPane tab="学习模型" key="5">
          学习模型
        </TabPane>
        <TabPane tab="模型API" key="6">
          模型API
        </TabPane>
      </Tabs>
    );
  }
}

export default projectdetail;
